<template>
    <div id="app">
        <header>
            <div class="navbar navbar-dark bg-dark shadow-sm">

                <div class="container d-flex justify-content-between">
                    <a class="navbar-brand d-flex align-items-center">
                        <strong>IPA2S3</strong>
                    </a>
                </div>
            </div>
        </header>
        <main>
            <section class="jumbotron text-center">
                <div class="container">
                    <h1>IPA2S3</h1>

                    <div class="row justify-content-md-center func-tab">
                        <div class="btn-group col-6" role="group">
                            <button @click="switchTab('url')" type="button"
                                    :class="activeClass('url')">From URL</button>
                            <button @click="switchTab('upload')" type="button"
                                    :class="activeClass('upload')">Upload Files</button>
                        </div>
                    </div>

                    <FromURL v-if="tabs.url"></FromURL>
                    <UploadFiles v-if="tabs.upload"></UploadFiles>

                    <div class="row justify-content-md-center">
                        <div class="card col-6 readme-txt">
                            <vue-markdown :source="readme"></vue-markdown>
                        </div>
                    </div>

                </div>
            </section>
        </main>
    </div>
</template>

<script>
    import service from "./service/IPA2S3Service"
    import VueMarkdown from 'vue-markdown'
    import FromURL from './components/FromURL'
    import UploadFiles from './components/UploadFiles'

    export default {
        name: 'App',

        components: {
            VueMarkdown,
            FromURL,
            UploadFiles
        },

        data() {
            return {
                tabs: {
                    url: true,
                    upload: false,
                },
                readme: "",
            }
        },

        methods: {
            switchTab(type) {
                this.tabs.url = false;
                this.tabs.upload = false;

                this.tabs[type] = true;
            },
            activeClass(type) {
                let classList = ['btn', 'btn-outline-secondary'];

                if (this.tabs[type]) {
                    classList.push('active');
                }

                return classList;
            }
        },

        mounted() {
            service.readme()
                .then((text) => {
                    this.readme = text;
                })
        }
    }
</script>

<style lang="scss">
    @import "~bootstrap-scss/bootstrap.scss";

    #app {
        .jumbotron {
            min-height: 90vh;
            margin: 0;
        }
        pre {
            background-color: #dfdfdf;
            border: 1px solid rgba(193, 193, 193, 0.8);
            text-align: left;
            padding: 1em;
            line-height: 1.5;
            border-radius: 5px;
            overflow-x: auto;
        }
        .func-tab {
            margin-bottom: 2em;
            margin-top: 1em;
        }
        .card {
            opacity: 0.8;
        }
        .btn-success {
            color: #ffffff;
            &:hover {
                border: 1px #28a745 solid;
                color: #28a745;
                background-color: #ffffff;
            }
        }
        .readme-txt {
            text-align: left;
            margin-top: 1em;
            padding: 1em;
        }
    }
</style>
